<template>
  <CommonDialog :dialogShow.sync="dialogShow" :title="curRow?.id ? '编辑比赛' : '新增比赛'" @makeSure="makeSure">
    <template #content>
      <el-form :model="team" label-width="120px" :rules="rules" class="team" ref="raceRef">
        <el-form-item label="比赛名称：" prop="name">
          <common-input v-model="team.name" placeholder="请输入比赛名称"></common-input>
        </el-form-item>
        <el-form-item label="比赛时间：" prop="time">
          <el-date-picker v-model="team.time" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" format="yyyy-MM-dd hh:mm:ss" value-format="yyyy-MM-dd hh:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="队伍一：" prop="team1">
          <common-select v-model="team.team1" :options="userOptions1" :multiple="true" :disabled="true"
            placeholder="请选择参赛队员" @change="changeteam"></common-select>
        </el-form-item>
        <el-form-item label="队伍二：" prop="team2">
          <common-select v-model="team.team2" :options="userOptions2" :multiple="true" :disabled="true"
            placeholder="请选择参赛队员" @change="changeteam2"></common-select>
        </el-form-item>
        <el-form-item label="裁判：" prop="referee">
          <common-select v-model="team.referee" :options="refereeList" :multiple="true"
            placeholder="请选择裁判"></common-select>
        </el-form-item>
        <el-form-item label="比赛地点：" prop="raceArea">
          <common-input v-model="team.raceArea" placeholder="请输入比赛地点"></common-input>
        </el-form-item>
      </el-form>
    </template>
  </CommonDialog>
</template>

<script>
export default {
  props: {
    changeDialog: {
      typeof: Boolean,
      default: false,
    },
    curRow: {
      typeof: Object,
      default: () => {
        return {
          id: "",
        };
      },
    },
  },
  created() {
    if (this.curRow.id) {
      console.log(123);

      const keys = Object.keys(this.curRow);
      keys.forEach((key) => {
        this.team[key] = this.curRow[key];
      });
    }

  },
  data() {
    return {
      team: {
        name: "",
        time: "",
        referee: [],
        team1: [],
        team2: [],
        raceArea: "",
      },
      refereeList: [
        {
          value: '9',
          label: '李武'
        }
      ],
      userOptions1: [
        {
          value: "1",
          label: "张1",
          disabled: false
        },
        {
          value: "2",
          label: "张2",
          disabled: false
        },
        {
          value: "3",
          label: "张3",
          disabled: false
        },
        {
          value: "4",
          label: "张4",
          disabled: false
        },
        {
          value: "5",
          label: "张5",
          disabled: false
        },
        {
          value: "6",
          label: "张6",
          disabled: false
        },
        {
          value: "7",
          label: "张7",
          disabled: false
        },
        {
          value: "8",
          label: "张8",
          disabled: false
        },
        {
          value: "9",
          label: "张9",
          disabled: false
        },
        {
          value: "10",
          label: "张10",
          disabled: false
        },
      ],
      userOptions2: [
        {
          value: "1",
          label: "张1",
          disabled: false

        },
        {
          value: "2",
          label: "张2",
          disabled: false

        },
        {
          value: "3",
          label: "张3",
          disabled: false

        },
        {
          value: "4",
          label: "张4",
          disabled: false
        },
        {
          value: "5",
          label: "张5",
          disabled: false
        },
        {
          value: "6",
          label: "张6",
          disabled: false
        },
        {
          value: "7",
          label: "张7",
          disabled: false
        },
        {
          value: "8",
          label: "张8",
          disabled: false
        },
        {
          value: "9",
          label: "张9",
          disabled: false
        },
        {
          value: "10",
          label: "张10",
          disabled: false
        },
      ],
      rules: {
        name: [
          { required: true, message: "请输入比赛名称", trigger: "blur" },
        ],
        time: [
          { required: true, message: "请选择比赛时间", trigger: "change" },
        ],
        referee: [
          { required: true, message: "请选择裁判", trigger: 'change' },
        ],
        team1: [
          { required: true, message: "请选择队伍一", trigger: 'change' },
        ],
        team2: [
          { required: true, message: "请选择队伍一", trigger: 'change' },
        ],
        raceArea: [
          { required: true, message: "请输入比赛地点", trigger: 'blur' },

        ]
      },
    };
  },
  computed: {
    dialogShow: {
      get() {
        return this.changeDialog;
      },
      set(v) {
        this.$emit("update:changeDialog", v);
      },
    },
  },
  mounted() { },

  methods: {
    makeSure() {

      this.$refs.raceRef.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    changeteam(v) {
      console.log(v);
      // this.userOptions2[0].disabled = true
      this.userOptions2.forEach((_item, _index) => {
        _item.disabled = false
      })
      let indexArr = []
      v.forEach(item => {
        this.userOptions2.forEach((_item, _index) => {
          if (item == _item.value) {
            indexArr.push(_index)
          }
        })
      })
      console.log(indexArr, 'a');
      indexArr.forEach((item) => {
        this.userOptions2[item].disabled = true
        this.$set(this.userOptions2[item], 'disabled', true)
      })
      this.$forceUpdate()

    },
    changeteam2(v) {
      console.log(v);
      this.userOptions1.forEach((_item, _index) => {
        _item.disabled = false
      })
      let indexArr = []
      v.forEach(item => {
        this.userOptions1.forEach((_item, _index) => {
          if (item == _item.value) {
            indexArr.push(_index)
          }
        })
      })
      console.log(indexArr, 'a');
      indexArr.forEach((item) => {
        this.userOptions1[item].disabled = true
        this.$set(this.userOptions1[item], 'disabled', true)
      })
      this.$forceUpdate()
    }
  },
};
</script>
<style lang="less" scoped>
.team {
  color: red;

  ::v-deep {
    .el-form-item__label {
      color: #333;
      font-size: 16px;
      font-weight: medium;
    }

    .el-input {
      width: 380px !important;
    }
  }
}
</style>
